Index

JavaScript
JavaScript Examples
CSS
CSS Examples

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

encodeURIComponent() and decodeURIComponent() functions with examples in JavaScript

JavaScript encodeURIComponent() and decodeURIComponent() functions: Here, we are going to learn about encodeURIComponent() and decodeURIComponent() functions with examples, how and when they are used?
Submitted by IncludeHelp, on February 01, 2019

As we have discussed that escape(), unescape() and encodeURI(), decodeURI() are used to encode a decodes the data/URI, these functions do not encode some of the special characters like @+-/.*_.

But, the functions encodeURIComponent() and decodeURIComponent() can do it.

JavaScript encodeURIComponent() and decodeURIComponent() functions

Functions encodeURIComponent() and decodeURIComponent() are used to encode and decode the URI along with @+-/.*_ characters. These functions encode, decode all special characters.

Example

<html>
<head>
<title>JavaScipt Example</title>
</head>

<body>
	<script>
		var uri ="test page.aspx?val=Hello world!!";
		
		//using encodeURI() and decodeURI() functions
		var enc_str = encodeURI(uri);
		var dec_str = decodeURI(uri);
		
		//printing the values 
		document.write("<b>Using encodeURI() and decodeURI()...</b><br>");
		document.write("Actual URI: " + uri);
		document.write("<br>");
		
		document.write("Encoded URI: " + enc_str);
		document.write("<br>");
		
		document.write("Decoded URI: " + dec_str);
		document.write("<br><br>");				

		//using encodeURIComponent() and decodeURIComponent() functions
		var enc_str = encodeURIComponent(uri);
		var dec_str = decodeURIComponent(uri);
		
		//printing the values 
		document.write("<b>Using encodeURIComponent() and decodeURIComponent()...</b><br>");
		document.write("Actual URI: " + uri);
		document.write("<br>");
		
		document.write("Encoded URI: " + enc_str);
		document.write("<br>");
		
		document.write("Decoded URI: " + dec_str);
		document.write("<br>");						
	</script>
</body>
</html>

Output

Using encodeURI() and decodeURI()...
Actual URI: test page.aspx?val=Hello world!!
Encoded URI: test%20page.aspx?val=Hello%20world!!
Decoded URI: test page.aspx?val=Hello world!!

Using encodeURIComponent() and decodeURIComponent()...
Actual URI: test page.aspx?val=Hello world!!
Encoded URI: test%20page.aspx%3Fval%3DHello%20world!!
Decoded URI: test page.aspx?val=Hello world!!